/*
 *@description:员工管理
 *@Author:@reynold
 *@Date:2025-03-22 11:09:07
 *@Update:2025-03-22 11:09:07
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="box">
      <div class="box_top">
        <el-button size="mini" @click="addCate">添加</el-button>
      </div>
      <div class="box_bottom">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="cateName"
            label="员工编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="员工姓名">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系方式">
          </el-table-column>
          <el-table-column
            prop="address"
            label="家庭住址">
          </el-table-column>
          <el-table-column
            prop="joinDate"
            label="入职时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button class="columnBtn1" type="text" size="small" @click="showCate(scope.row)">查看</el-button>
              <el-button class="columnBtn2" type="text" size="small" @click="showPop(scope.row)">删除</el-button>
              <el-button class="columnBtn3" type="text" size="small" @click="editCate(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 抽屉 -->
        <el-drawer
          title="添加/编辑员工信息"
          :visible.sync="drawer">
          <div class="demo-drawer__content">
            <el-form :model="drawerForm" :rules="rules" ref="drawerForm">
              <el-form-item label="员工编号" prop="cateName" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.cateName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="员工姓名" prop="name" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.sex" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="phone" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="家庭住址" prop="address" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.address" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="入职时间" prop="joinDate" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.joinDate" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
        </el-drawer>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <!-- 详细信息dialog -->
        <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column property="id" label="栏目id" width="150"></el-table-column>
            <el-table-column property="cateName" label="员工编号"></el-table-column>
            <el-table-column property="name" label="员工姓名"></el-table-column>
            <el-table-column property="sex" label="性别"></el-table-column>
            <el-table-column property="phone" label="联系方式"></el-table-column>
            <el-table-column property="address" label="家庭住址"></el-table-column>
            <el-table-column property="joinDate" label="入职时间" width="200"></el-table-column>
          </el-table>
        </el-dialog>
        <!-- 提示删除栏目的dialog -->
        <el-dialog
          title="删除员工信息"
          :visible.sync="dialogVisible"
          width="30%">
          <span>确认要删除此员工信息吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="delCate">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'

export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          cateName: 'EMP001',
          name: '张三',
          sex: '男',
          phone: '13800138000',
          address: '北京市朝阳区',
          joinDate: '2023-01-01'
        },
        {
          id: 2,
          cateName: 'EMP002',
          name: '李四',
          sex: '女',
          phone: '13900139000',
          address: '上海市浦东新区',
          joinDate: '2023-02-01'
        },
        {
          id: 3,
          cateName: 'EMP003',
          name: '王五',
          sex: '男',
          phone: '13700137000',
          address: '广州市天河区',
          joinDate: '2023-03-01'
        },
        {
          id: 4,
          cateName: 'EMP004',
          name: '赵六',
          sex: '女',
          phone: '13600136000',
          address: '深圳市福田区',
          joinDate: '2023-04-01'
        },
        {
          id: 5,
          cateName: 'EMP005',
          name: '孙七',
          sex: '男',
          phone: '13500135000',
          address: '杭州市西湖区',
          joinDate: '2023-05-01'
        },
        {
          id: 6,
          cateName: 'EMP006',
          name: '周八',
          sex: '女',
          phone: '13400134000',
          address: '南京市鼓楼区',
          joinDate: '2023-06-01'
        },
        {
          id: 7,
          cateName: 'EMP007',
          name: '吴九',
          sex: '男',
          phone: '13300133000',
          address: '成都市武侯区',
          joinDate: '2023-07-01'
        },
        {
          id: 8,
          cateName: 'EMP008',
          name: '郑十',
          sex: '女',
          phone: '13200132000',
          address: '武汉市江汉区',
          joinDate: '2023-08-01'
        },
        {
          id: 9,
          cateName: 'EMP009',
          name: '陈十一',
          sex: '男',
          phone: '13100131000',
          address: '西安市碑林区',
          joinDate: '2023-09-01'
        },
        {
          id: 10,
          cateName: 'EMP010',
          name: '杨十二',
          sex: '女',
          phone: '13000130000',
          address: '重庆市渝中区',
          joinDate: '2023-10-01'
        }
      ],
      pageQuery: {
        pageSize: 10,
        pageNum: 1
      },
      total: 100,
      drawer: false,
      drawerForm: {
        cateName: '',
        name: '',
        sex: '',
        phone: '',
        address: '',
        joinDate: ''
      },
      formLabelWidth: '80px',
      loading: false,
      drawerTitle: '添加/编辑员工信息',
      dialogTableVisible: false,
      dialogVisible: false,
      cateId: 0,
      gridData: [],
      isEdit: false, // 用于标识当前是添加还是编辑操作
      editIndex: -1, // 记录正在编辑的行的索引
      rules: {
        cateName: [
          { required: true, message: '请输入员工编号', trigger: 'blur' },
          { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入员工姓名', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入家庭住址', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        joinDate: [
          { required: true, message: '请输入入职时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    initIndex() {
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getList()
    },
    addCate() {
      this.isEdit = false;
      this.drawer = true
      this.drawerForm = {
        cateName: '',
        name: '',
        sex: '',
        phone: '',
        address: '',
        joinDate: ''
      };
    },
    cancelForm() {
      this.drawer = false
      this.isEdit = false;
      this.drawerForm = {
        cateName: '',
        name: '',
        sex: '',
        phone: '',
        address: '',
        joinDate: ''
      };
    },
    handlesubmit() {
      this.$refs.drawerForm.validate((valid) => {
        if (valid) {
          this.$confirm('确定要' + (this.isEdit? '保存修改' : '添加') + '吗')
           .then(() => {
              this.loading = true;
              if (this.isEdit) {
                this.tableData[this.editIndex] = {
                  id: this.tableData[this.editIndex].id,
                  ...this.drawerForm
                };
                utils.showSuccess('编辑成功');
              } else {
                const newEmployee = {
                  id: this.tableData.length + 1,
                  ...this.drawerForm
                };
                this.tableData.push(newEmployee);
                utils.showSuccess('添加成功');
              }
              this.getList();
              this.loading = false;
              this.drawer = false;
              this.isEdit = false;
              this.drawerForm = {
                cateName: '',
                name: '',
                sex: '',
                phone: '',
                address: '',
                joinDate: ''
              };
            })
           .catch(() => {});
        }
      });
    },
    showPop(scope) {
      this.dialogVisible = true
      this.cateId = scope.id
    },
    delCate() {
      console.log(this.cateId);
      this.tableData = this.tableData.filter(item => item.id!== this.cateId);
      utils.showSuccess('删除成功');
      this.getList();
      this.dialogVisible = false;
    },
    getList() {
      // 这里如果实际有后台数据请求，可恢复原来的代码
      // instance.post('/category/list', this.pageQuery).then(res => {
      //   this.tableData = res.data.list
      //   this.total = res.data.data.total
      // })
    },
    showCate(scope) {
      console.log(scope);
      this.gridData = []
      this.gridData.push(scope)
      this.dialogTableVisible = true
    },
    editCate(scope) {
      this.isEdit = true;
      this.editIndex = this.tableData.findIndex(item => item.id === scope.id);
      this.drawer = true;
      this.drawerForm = {
        cateName: scope.cateName,
        name: scope.name,
        sex: scope.sex,
        phone: scope.phone,
        address: scope.address,
        joinDate: scope.joinDate
      };
    }
  },
  created() {
    this.getList()
  },
  components: {
    Card
  }
}
</script>

<style lang="less" scoped>
.box {
 .box_top {
   .el-button--mini {
     color: #fff;
     background-color: #4069e4e7;
     border: none;
   }
  }
 .box_bottom {
   .tiltle {
     margin: 10px;
     font-size: 16px;
     font-weight: 600;
   }
   .demo-drawer__content {
     form {
       height: 80vh;
     }
     .demo-drawer__footer {
       float: right;
       margin-right: 15px;
     }
   }
   .columnBtn1 {
     color: #4069e4e7;
   }
   .columnBtn2 {
     color: rgb(236, 65, 65);
   }
   .columnBtn3 {
     color: #2c75e6;
   }
   // 分页样式
   .el-pagination {
     float: right;
   }
  }
}
.el-color-picker__icon,
.el-input,
.el-textarea {
  width: 300px;
}
</style>    